@import "../../../assets/scss/sass-themify.scss";

// original colors
// $dragonfruit: #fe50fd
// $watermelon: #f76ed5
// $pomelo: #e96c50
// $orange: #fda607
// $kiwi: #acf000
// $honeydew: #01fea1
// $bluerazz: #00d4ff
// $blueberry: #0d6efd
// $grape: #5c01ff
// $steel: #d3dcfb

// define a theme map
// https://github.com/gone369/sass-themify
$theme-map: (
  "default-theme": (
  "background-color": #ffffff,
  "text-color": #515666,
  "border-color": #ffc2ff,
  "primary-color": #93f5ff,
  "accent-color": #f06fd1,
  "muted-color": #863973,
  ),
  "dark-theme": (
  "background-color": #515666,
  "text-color": #ffffff,
  "border-color": #cbd4ee,
  "primary-color": #ffa2ff,
  "accent-color": #93f5ff,
  "muted-color": #9ad6ff,
  ),
  "grape-theme": (
  "background-color": #ffffff,
  "text-color": #3e05a4,
  "border-color": #ffd2ff,
  "primary-color": #ff89ff,
  "accent-color": #fb56fa,
  "muted-color": #6f18ff,
  ),
  "watermelon-theme": (
  "background-color": #ffffff,
  "text-color": #f06fd1,
  "border-color": #91dbb6,
  "primary-color": #33bc78,
  "accent-color": #ffd2ff,
  "muted-color": #008e47,
  ),
  "citrus-theme": (
  "background-color": #ffffff,
  "text-color": #ed8973,
  "border-color": #b8d78f,
  "primary-color": #ffbd83,
  "accent-color": #f6c4b9,
  "muted-color": #ff841c,
  ),
  "berry-theme": (
  "background-color": #ffffff,
  "text-color": #0c49a3,
  "border-color": #48e0ff,
  "primary-color": #93f5ff,
  "accent-color": #cbd4ee,
  "muted-color": #2480ff,
  ),
  "peach-theme": (
  "background-color": #ffffff,
  "text-color": #0c49a3,
  "border-color": #ff841c,
  "primary-color": #cbd4ee,
  "accent-color": #bd5d0f,
  "muted-color": #ed8973,
  ),
);

@mixin frame($fr-bg) {
  background-color: $fr-bg;
  --frame-border-color: hsl(from $fr-bg h s calc(l + 20%));
  border: var(--frame-border-color) solid 2px;
}

@mixin frame--hover($fr--hv-bg) {
  background-color: $fr--hv-bg;
  --frame-border-hv-color: hsl(from $fr--hv-bg h s calc(l + 20%));
  border: var(--frame-border-hv-color) solid 2px;
}

//call initialize mixin with the theme-map variable
@include sass-themify-init($theme-map);

//color related css goes under here within sass-themify mixin
@include sass-themify() {
  $frame-background: sass-themify-get-color("primary-color");
  $frame-background-hover: sass-themify-get-color("muted-color");
  $border-hover: sass-themify-get-color("accent-color");
  $border-active: sass-themify-get-color("accent-color");
  $hover-overlay: sass-themify-get-color("text-color");

  body {
  background-color: sass-themify-get-color("primary-color") !important;
  }
  .box {
  background-color: sass-themify-get-color("background-color");
  background-color: sass-themify-get-color("background-color");
  border-color: sass-themify-get-color("accent-color");
  box-shadow: -5px 5px 0px sass-themify-get-color("accent-color");
  #text {
    color: sass-themify-get-color("text-color");
  }
  }
  #theme-box {
  background-color: sass-themify-get-color("background-color");
  color: sass-themify-get-color("text-color");
  border-color: sass-themify-get-color("border-color");
  h4 {
    color: sass-themify-get-color("muted-color");
  }
  .hrule {
    color: sass-themify-get-color("accent-color");
    border-bottom: 1px solid currentColor;
  }
  .primary {
    background-color: sass-themify-get-color("primary-color");
    color: sass-themify-get-color("text-color");
  }
  }
  #wrapper {
  color: sass-themify-get-color("text-color");
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
  color: sass-themify-get-color("text-color");
  }
  .content {
  background-color: sass-themify-get-color("background-color");
  }
  .social-media {
  a {
    color: sass-themify-get-color("text-color");
  }
  }
  #nm-logo,
  #toggler-icon {
  fill: sass-themify-get-color("muted-color");
  color: transparent;
  background-color: transparent;
  }
  .website--frame {
  @include frame($frame-background);
  &:hover {
    @include frame--hover($frame-background-hover);
    .website--frame-circle {
  background-color: $black;
    }
    .proj--textwrapper {
  color: $black;
    }
  }
  &:active {
    border-color: $border-active;
  }
  }
  .website--frame-header {
  &:hover {
    border-color: $border-hover;
    background-color: $frame-background-hover;
  }
  }
  .website--frame-circle {
  &.red {
    background-color: var(--dragonfruit-3);
  }
  &.yellow {
    background-color: var(--kiwi-3);
  }
  &.green {
    background-color: var(--honeydew-3);
  }
  }
  .hover-overlay-wrap {
  background-color: $hover-overlay;
  }
  .hover--more {
  color: var(--dragonfruit-3);
  }
  .proj--textwrapper {
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  color: $white;
  }
  .form-select {
  color: sass-themify-get-color("text-color");
  background-color: sass-themify-get-color("background-color");
  border: 1px solid sass-themify-get-color("border-color");
  }
}
